<style>
    .tabs_bg {
        padding: 8px;
        background: url('${base}/static/img/welcome.jpg') no-repeat right bottom;;
    }

    .tabs_bg p {
        margin: 12px 30px 12px 0;
    }

    .alert p {
        margin-top: 8px;
    }

    .timeline{ position: relative; clear: both; height: auto; border-left: 1px solid #dcdcdc; margin: 0 0 0 170px; padding: 20px 0 200px; }
    .timeline:before,.timeline:after{content:""; width: 10px; height: 10px; background-color: #bebebe; position:absolute; left:-5px; border-radius: 10px;}
    .timeline:before{ top: 0;}
    .timeline:after{ bottom: 0;}

    .timeline dl{ width: 100%; height: auto; clear: both;}
    .timeline dl dt{ float: left;  position:relative; text-align: right; width: 170px; margin: 0 0 0 -190px;line-height: 20px; padding: 10px 0;}
    .timeline dl dt b{ font-size: 12px; }
    .timeline dl dt p{ color: #787878; }
    .timeline dl dd{ float: left; position:relative; margin:2px 0 20px 20px; line-height: 20px; padding: 10px; display: block; border-radius:5px; background-color: #fff; border: 1px solid #dcdcdc; box-shadow: 0 10px 15px -15px #888;}
    .timeline dl dt:before{ content:""; width: 10px; height: 10px; background-color: #007ddc; position:absolute; top: 15px; right:-25px; border-radius: 10px;}

    .timeline dl dd:before,.timeline dl dd:after{width:0px;height:0px;border:transparent solid;position:absolute;right:100%;content:""}
    .timeline dl dd:before{border-width:9px;border-right-color: #c3c3c3;top:10px;}
    .timeline dl dd:after{border-width:8px;border-right-color: #fff;top:11px;}

    .timeline-header{padding: 10px; border-radius:5px; background-color: #fff; border: 1px solid #dcdcdc; box-shadow: 0 10px 15px -15px #888; width: 160px; font-weight: bold; margin: -22px 0 20px -72px; text-align: center; position: relative;}

    .timeline-portrait-node dl dt img{ width: 46px; height: 46px; border-radius: 50px; position: absolute; top: 8px; right: -65px; border:4px solid #e6e6e6; background-color: #e6e6e6;  }
    .timeline-portrait-node{ margin: 0 0 0 190px;}
    .timeline-portrait-node dl dt{  width: 220px; margin: 0 0 0 -260px;}
    .timeline-portrait-node dl dt:before{ display: none; }
    .timeline-portrait-node dl dd{margin: 8px 0 20px 40px;}

    .timeline-left{ margin: 0 0 0 10px;}
    .timeline-left dl dt,.timeline-left dl dd{clear: both;}
    .timeline-left dl dt{text-align:left; width:auto; margin: 0 0 0 20px;}
    .timeline-left dl dt:before{left: -25px;}

    .timeline-left dl dd:before,.timeline-left dl dd:after{border:transparent solid;top:100%;}
    .timeline-left dl dd:before{border-width:6px;border-bottom-color: #c3c3c3;top:-12px;left:15px;}
    .timeline-left dl dd:after{border-width:5px;border-bottom-color: #fff;top:-10px;left:16px;}
    .timeline-left dl dd{margin: 0 0 10px 20px;}

    .timeline-portrait-node.timeline-left{margin: 0 0 0 45px;}
    .timeline-portrait-node.timeline-left dl dt{margin: 0 0 0 40px;}
    .timeline-portrait-node.timeline-left dl dt img{left: -68px;}
    .timeline-portrait-node.timeline-left dl dd{margin: 0 0 15px 40px;}

    .timeline-both{margin: 0 0 0 50%;}
    .timeline-both dl:nth-child(even) dd{ margin: 2px 100% 20px -100%;float: right;right: 20px;}
    .timeline-both dl:nth-child(even) dt{text-align: left;margin:0;width:auto;padding: 0 0 0 20px;position: absolute;}
    .timeline-both dl:nth-child(even) dt:before{left: -5px;}
    .timeline-both dl:nth-child(even) dd:before,.timeline-both dl:nth-child(even) dd:after{border:transparent solid;right: 0;}
    .timeline-both dl:nth-child(even) dd:before{border-width:9px;border-left-color: #c3c3c3;top: 11px;right: -18px;}
    .timeline-both dl:nth-child(even) dd:after{border-width:8px;border-left-color: #fff;top: 12px;right: -16px;}
    .timeline-portrait-node.timeline-both dl:nth-child(even) dt img{left: -28px;}
    .timeline-portrait-node.timeline-both dl:nth-child(even) dt{padding: 10px 0 0 40px;}
    .timeline-portrait-node.timeline-both dl:nth-child(even) dd{right: 45px;margin: 15px 100% 20px -100%;}

    .timeline-node-red dt:before
    { background-color:#e61414 !important; }
    .timeline-node-orange dt:before
    { background-color:#ff6c00 !important; }
    .timeline-node-yellow dt:before
    { background-color:#ffbe00 !important; }
    .timeline-node-olive dt:before
    { background-color:#afc800 !important; }
    .timeline-node-green dt:before
    { background-color:#41aa00 !important; }
    .timeline-node-teal dt:before
    { background-color:#00beb4 !important; }
    .timeline-node-blue dt:before
    { background-color:#007ddc !important; }
    .timeline-node-darkblue dt:before
    { background-color:#004b96 !important; }
    .timeline-node-violet dt:before
    { background-color:#642dd7 !important; }
    .timeline-node-purple dt:before
    { background-color:#a01ec8 !important; }
    .timeline-node-pink dt:before
    { background-color:#dc238c !important; }
    .timeline-node-brown dt:before
    { background-color:#be5f1e !important; }
    .timeline-node-grayish dt:before
    { background-color:#e1e1e1 !important;}
    .timeline-node-grey dt:before
    { background-color:#646464 !important; }
    .timeline-node-black dt:before
    { background-color:#1e1e1e !important; }
    .timeline-node-white dt:before
    { background-color:#fff !important; color:#1e1e1e;}
</style>
<script>
    $(function(){
        $('#ipSearchA').bind('click', function(){
            $('#IPGeoDialog').dialog({
                title: '查看IP位置',
                closed: false,
                cache: true,
                modal: true
            });
        })
    });
</script>
<div id="IPGeoDialog" style="display:none;overflow-y:hidden;width:68%;height:63%;">
    <iframe src="http://ip.taobao.com/ipSearch.php?ipAddr=${serverInfo['login.ipAddr']}" noresize="noresize" framespacing="0" frameborder="0" width="100%" height="100%" style="overflow-y:hidden;resize:none"/>
</div>
<div class="alert alert-block" style="margin:8px;height:80px;">
    <div class="alert-icons"></div>
    <b>Welcome!</b>
    <p>上次登录时间：${serverInfo['login.lastTime']}</p>
    <p>
        IP地址：${serverInfo['login.ipAddr']}
        <a id="ipSearchA" href="#" class="easyui-linkbutton button-orange button-xs l-btn l-btn-small" style="font-size:8px;width:120px;">
            <span class="l-btn-left">
                <span class="l-btn-text">
                    <i class="iconfont">&#xe6f2;</i> 查看位置
                </span>
            </span>
        </a>
    </p>
</div>
<div id="default-tabs" class="easyui-tabs tabs-container easyui-fluid" style="height:85%;padding:8px;" data-options="tabPosition:'top',pill:true,justified:true">
    <div title="服务器信息" class="tabs_bg" data-options="iconCls:'icon-sys-info'">
        <table class="table table-striped" width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size: 12px;">
            <tr style="height:23px; line-height:23px;">
                <td width="18%">服务器系统</td>
                <td width="32%">${serverInfo['operate.system']}</td>
                <td width="18%">服务器IP</td>
                <td width="32%">${serverInfo['network.address']}</td>
            </tr>
            <tr style="height:23px; line-height:23px;">
                <td width="18%">编码集</td>
                <td width="32%">${serverInfo['default.encoding']}</td>
                <td width="18%">当前路径</td>
                <td width="32%">${serverInfo['current.path']}</td>
            </tr>
            <tr style="height:23px; line-height:23px;">
                <td width="18%">路径字符</td>
                <td width="32%">${serverInfo['file.separator']}</td>
                <td width="18%">JDK版本</td>
                <td width="32%">${serverInfo['jdk.version']}</td>
            </tr>
            <tr style="height:23px; line-height:23px;">
                <td width="18%">时区</td>
                <td width="32%">${serverInfo['user.timezone']}</td>
                <td width="18%">MAC</td>
                <td width="32%">${serverInfo['machine.mac']}</td>
            </tr>
            <tr style="height:23px; line-height:23px;">
                <td width="18%">服务组件</td>
                <td width="32%">${serverInfo['servlet.info']}</td>
                <td width="18%">运行版本</td>
                <td width="32%">${serverInfo['servlet.version']}</td>
            </tr>
            <tr style="height:23px; line-height:23px;">
                <td width="18%">访问入口</td>
                <td colspan="3">${serverInfo['servlet.enter']}</td>
            </tr>
        </table>
    </div>
    <div title="发布日志" style="padding:5px" class="tabs_bg"  data-options="iconCls:'icon-update-version'">
        <div style="width: 100%; height: 32px; padding: 20px 0;font-size: 12px">
            <div class="timeline timeline-both">
                <div class="timeline-header">当前版本号：Ver 2.0.4</div>
                <dl class="timeline-node-red">
                    <dt>
                        <p>2017年05月04日</p>
                    </dt>
                    <dd>完成后台UI界面设计，及的平台登录等功能集成</dd>
                </dl>
                <dl class="timeline-node-green">
                    <dt>
                        <p>2017年05月10日</p>
                    </dt>
                    <dd>实现数据字典功能，完成公司信息模块及系统操作日志记录</dd>
                </dl>
                <dl class="timeline-node-pink">
                    <dt>
                        <p>2017年05月20日</p>
                    </dt>
                    <dd>完成微信配置管理及微信集成测试功能</dd>
                </dl>
                <dl class="timeline-node-yellow">
                    <dt>
                        <p>2017年05月24日</p>
                    </dt>
                    <dd>上线万年历小功能</dd>
                </dl>
                <dl class="timeline-node-violet">
                    <dt>
                        <p>2017年05月30日</p>
                    </dt>
                    <dd>完成用户信息，商品管理，订单查看模块</dd>
                </dl>
                <dl class="timeline-node-olive">
                    <dt>
                        <p>2017年06月10日</p>
                    </dt>
                    <dd>集成微信商城平台前端展示，并布署上线至测试环境</dd>
                </dl>
                <dl class="timeline-node-blue">
                    <dt>
                        <p>2017年06月15日</p>
                    </dt>
                    <dd>完成商城首面广告图片，用户个人中心模块</dd>
                </dl>
                <dl class="timeline-node-blue">
                    <dt>
                        <p>2017年06月20日</p>
                    </dt>
                    <dd>上线微信在线支付，并完成测试环境自动转换0.01元支付功能</dd>
                </dl>
                <dl class="timeline-node-purple">
                    <dt>
                    <p>2017年07月05日</p>
                    </dt>
                    <dd>临时上线正式环境</dd>
                </dl>
                <dl class="timeline-node-brown">
                    <dt>
                    <p>2017年07月09日</p>
                    </dt>
                    <dd>增加关注刮刮奖送礼功能并上线</dd>
                </dl>
                <dl class="timeline-node-purple">
                    <dt>
                    <p>2017年09月09日</p>
                    </dt>
                    <dd>增加东吴健管接口功能并上线</dd>
                </dl>
            </div>
        </div>
    </div>
</div>